import Vue              from 'vue'
import VueRouter        from 'vue-router'
import Home             from '../views/Home.vue'
import About            from '../views/About'
import PageA            from '../views/AboutViews/PageA'
import PageB            from '../views/AboutViews/PageB'



Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    component:About,
    children:[
        {
            path:"",
            redirect:"/about/pageB"
        },
        {
            path:"/pageA",
            component:PageA
        },
        {
            path:"pageB",
            component:PageB
        }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router
